<template>
  <div class="tabPanel maimai">
    <otc-index-header />
    <ul>
      <li
        v-for="(item, index) in tabList"
        :key="item.text"
        :class="{ hit: item.active }"
        @click="handleClick(index, item.side)"
      >
        {{ $t(item.text) }}
      </li>
    </ul>
    <div class="yue">{{ $t('余额') }}：<span v-if="balance">{{ balance.total_amount | numberFormat(8) }} {{ balance.unit }}</span></div>
    <div class="panes">
      <otc-index-market-list :side="side" :list="listData"/>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex'
import otcIndexHeader from '@/components/partials/otc/index/Header'
import otcIndexMarketList from '@/components/partials/otc/index/MarketList'
const title = '法币交易'
export default {
  components: { otcIndexHeader, otcIndexMarketList },
  data () {
    return {
      tabList: [
        {
          text: '我要买',
          active: true,
          side: 1
        },
        {
          text: '我要卖',
          active: false,
          side: 2
        }
      ],
      activeIndex: 0,
      listData: []
    }
  },
  computed: {
    ...mapState({
      money: ({ otc }) => otc.money
    }),
    ...mapGetters({
      balance: 'otc/balance'
    }),
    side () {
      return this.tabList[this.activeIndex].side
    }
  },
  watch: {
    money (money) {
      this.loadMarketList(money, this.side)
    }
  },
  beforeMount () {
    this.getCoinList()
      .then((data) => {
        const assetType = data.map(item => item.coin_name)
        this.getExchangeBalance({ asset_type: assetType.join('|') })
      })

    this.loadMarketList(this.money, this.side)
  },
  methods: {
    ...mapActions({
      getExchangeBalance: 'fund/getExchangeBalance',
      getCoinList: 'otc/getCoinList',
      getMarketList: 'otc/getMarketList'
    }),
    loadMarketList (money, side) {
      this.listData = []
      this.getMarketList({
        coin_name: money,
        side
      })
        .then(data => (this.listData = data))
    },
    handleClick (index, side) {
      if (this.activeIndex === index) { return }
      this.tabList[this.activeIndex].active = false
      this.tabList[index].active = true
      this.activeIndex = index
      this.loadMarketList(this.money, side)
    }
  },
  head () {
    return {
      title
    }
  }
}
</script>
<style scoped>
.maimai {
  padding-top: 0;
}
</style>
